<template>
  <jy-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
    <el-input v-model="filterText" placeholder="请输入技术指标" clearable size="small" prefix-icon="el-icon-search" />
    <!-- 单选 -->
    <!-- <el-tree class="dialog-tree" v-loading="loading" :data="dataList" default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :check-strictly="true" :filter-node-method="filterNode" @node-click="handleNodeClick"> -->
    <!-- 多选 -->
    <el-tree
      class="dialog-tree"
      v-loading="loading"
      :data="dataList"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
      :check-strictly="true"
      :filter-node-method="filterNode"
    >
      <div slot-scope="{ node, data }" class="custom-tree-node" :title="node.label" v-text="node.label"></div>
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>
<script>
import { syTpyeTree, bsJudgeBaseTreeBySyType, listBsJudgeBase } from "@/api/sycs/bsJudgeBase";
import { mapGetters } from "vuex";
export default {
  name: "BsJudgeBaseView",
  // 监听顶部全局下拉
  computed: {
    ...mapGetters(["deptId"])
  },
  props: {
    syType: {
      type: [String, Number],
      default: ""
    }
  },
  data() {
    return {
      title: "技术指标",
      loading: false,
      open: false,
      ids: [],
      dataList: [],
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label",
        disabled: "disabled" // 确保这里包含了 disabled 属性，以便 el-tree 能够识别它
      }
    };
  },
  watch: {
    // 根据名称筛选树
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  created() {},
  mounted() {},
  methods: {
    init(ids) {
      // if (ids.length) {
      //   const numbersArray = ids.split(",");
      //   this.ids = numbersArray.map(Number);
      // }
      this.ids = ids;
      this.open = true;
      this.getList();
    },
    /** 查询技术指标列表 */
    getList() {
      this.loading = true;
      const queryParams = {
        deptId: this.deptId,
        syTypeId: this.syType
      };
      bsJudgeBaseTreeBySyType(queryParams).then((response) => {
        // this.dataList = response.data;
        this.dataList = this.processTreeData(response.data);
        this.loading = false;
        this.$nextTick(() => {
          if (this.ids) {
            this.$refs.tree.setCheckedKeys(this.ids.split(","));
          }
        });
      });
    },
    processTreeData(data) {
      return data.map((node) => {
        const newNode = { ...node };
        if (newNode.children && newNode.children.length > 0) {
          newNode.disabled = true;
        }
        return newNode;
      });
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data, node, component) {
      // 判断是否是最后一级节点
      if (!data.children || data.children.length === 0) {
        // 是最后一级节点，可以进行选择逻辑
        // console.log("选择了最后一级节点：", data.label);
      } else {
        this.$refs.tree.setCurrentKey(null);
      }
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.filterText = "";
      // this.$refs.tree.setCurrentKey(null);
      this.$refs.tree.setCheckedKeys([]);
    },
    // 单选
    // async submitForm() {
    //   const info = this.$refs.tree.getCurrentNode();
    //   console.log(info);
    //   if (!info || !info.id || !info.weight || !info.weight.includes("detail")) {
    //     this.$message.warning("请选择技术指标");
    //     return;
    //   }
    //   const arr = info.weight.split("-");
    //   console.log(arr);

    //   const queryParams = {
    //     judgeBsId: arr[1]
    //   };
    //   const { rows } = await listBsJudgeBase(queryParams);
    //   info.list = rows;
    //   this.$emit("select", info);
    //   this.cancel();
    // },
    // 多选
    async submitForm() {
      const arr = this.$refs.tree.getCheckedNodes();
      if (!arr || arr.length <= 0) {
        this.$message.warning("请选择技术指标");
        return;
      }
      const judgeBsId = arr[0].weight.split("-");
      const queryParams = {
        judgeBsId: judgeBsId[1]
      };
      const { rows } = await listBsJudgeBase(queryParams);
      const ids = arr.map((item) => item.id);
      const label = arr.map((item) => `${item.label}`);
      const info = {
        label: label.join("、"),
        ids: ids.join(","),
        list: rows
      };
      // this.$emit("select", { label: label.join("、"), ids: ids.join(",") });
      this.$emit("select", info);
      this.cancel();
    }
  }
};
</script>
<style lang="scss" scoped></style>
